AMP পেজ তৈরি করতে হলে আপনাকে কিছু নির্দিষ্ট HTML ফরম্যাট অনুসরণ করতে হবে। AMP HTML হলো একটি বিশেষ HTML ফরম্যাট যা কিছু নির্দিষ্ট বিধি এবং কৌশল ব্যবহার করে পেজের লোডিং টাইম কমায় এবং মোবাইল ডিভাইসে দ্রুত লোড হতে সহায়তা করে।
এখানে AMP এর জন্য একটি প্রাথমিক HTML ফরম্যাট দেয়া হলো:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMP Page Example</title>
<!-- AMP runtime script -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP styles (CSS) -->
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50;
}
p {
color: #555;
}
</style>
<!-- AMP font preload -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>
<body>
<header>
<h1>Welcome to AMP</h1>
</header>
<section>
<p>This is an example of an AMP (Accelerated Mobile Pages) HTML page.</p>
<!-- Example of AMP image -->
<amp-img src="https://via.placeholder.com/600x300" width="600" height="300" alt="AMP Image" layout="responsive"></amp-img>
<!-- Example of AMP video -->
<amp-video width="640" height="360" layout="responsive" src="https://www.w3schools.com/html/movie.mp4" controls></amp-video>
</section>
<footer>
<p>AMP Page Example - © 2024</p>
</footer>
</body>
</html>এই HTML ফরম্যাটের মূল উপাদান:
<html amp>:- AMP পেজের জন্য
htmlট্যাগের মধ্যেampঅ্যাট্রিবিউট থাকতে হবে, যা গুগলকে জানায় যে এই পেজটি AMP ফরম্যাটে লেখা হয়েছে।
- AMP পেজের জন্য
<script async src="https://cdn.ampproject.org/v0.js"></script>:- AMP পেজের জন্য গুগলের AMP রUNTIME স্ক্রিপ্ট যা পেজের কার্যক্ষমতা নিশ্চিত করে। এটি অবশ্যই
asyncঅ্যাট্রিবিউট সহ থাকতে হবে যাতে স্ক্রিপ্টটি পেজের লোডিংকে ব্লক না করে।
- AMP পেজের জন্য গুগলের AMP রUNTIME স্ক্রিপ্ট যা পেজের কার্যক্ষমতা নিশ্চিত করে। এটি অবশ্যই
<style amp-custom>:- AMP পেজের স্টাইলিং CSS এর জন্য
<style amp-custom>ট্যাগ ব্যবহার করা হয়। এখানে আপনি পেজের কাস্টম স্টাইলিং নির্ধারণ করতে পারেন। AMP সাইটে স্টাইলশিটের আকার ৫০ KB এর বেশি হওয়া উচিত নয়।
- AMP পেজের স্টাইলিং CSS এর জন্য
<amp-img>:- AMP এ সাধারণ
<img>ট্যাগের পরিবর্তে<amp-img>ট্যাগ ব্যবহার করা হয়। এর মধ্যেwidth,height, এবংlayoutঅ্যাট্রিবিউট থাকা জরুরি।
- AMP এ সাধারণ
<amp-video>:- AMP পেজে ভিডিও প্রদর্শনের জন্য
<amp-video>ট্যাগ ব্যবহার করা হয়। এটি সাধারণ<video>ট্যাগের পরিবর্তে ব্যবহৃত হয়, এবংwidth,height, এবংlayoutঅ্যাট্রিবিউট থাকা জরুরি।
- AMP পেজে ভিডিও প্রদর্শনের জন্য
<meta name="viewport" content="width=device-width, initial-scale=1">:- মোবাইল ডিভাইসের জন্য পেজটি রেসপন্সিভ এবং স্কেলেবল করার জন্য
viewportমেটা ট্যাগটি ব্যবহার করা হয়।
- মোবাইল ডিভাইসের জন্য পেজটি রেসপন্সিভ এবং স্কেলেবল করার জন্য
বিশেষ টিপস:
- AMP পেজে JavaScript ব্যবহার সীমিত থাকে। আপনি কেবল AMP লাইব্রেরি ব্যবহার করতে পারবেন এবং অন্য কাস্টম স্ক্রিপ্টের ব্যবহার করা যাবে না।
- CSS এর আকার ৫০ KB এর মধ্যে থাকতে হবে।
- পেজের লোডিং স্পীড উন্নত করার জন্য কিছু নির্দিষ্ট ট্যাগ এবং কনফিগারেশন অবশ্যই মানতে হবে।
এই HTML ফরম্যাট ব্যবহার করে আপনি AMP পেজ তৈরি করতে পারবেন এবং তা মোবাইল ডিভাইসে দ্রুত লোড হবে।
Content added By
Read more
